<template>
    <div class = "Addbasethree">
        <el-container v-loading="loading">
        <el-container>
        <el-main>
            <div class = "Box-wrapper">
                <el-breadcrumb separator="/">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item>基地项目</el-breadcrumb-item>
                </el-breadcrumb>
                <el-button style="float:right" @click = "newly">新增</el-button>
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    align="center"
                    label="ID">
                </el-table-column>
                <el-table-column
                    prop="title"
                    align="center"
                    label="标题">
                </el-table-column>
                <el-table-column
                    prop="weight"
                    label="权重"
                    align="center"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="创建时间"
                    align="center"
                    width="180">
                </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    @click="Image(scope.$index, scope.row)">轮播图</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
                </el-table>
            </div>
        </el-main>
        </el-container>
        </el-container>
    </div>
</template>
<script>
import transitionTime from '../../transitionTime.js'
import Vue from "vue";
export default {
    data(){
      var validatetitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名称'));
        } else {
          callback();
        }
      };
      var validatecontent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容'));
        } else {
          callback();
        }
      };
        return{
            tableData: [],
            loading:false,
            ruleForm: {
            title: '',
            content: '',
            id:'',
            imgId:''
            },
            fileList:[],
            form:{},
            baseId:'',
            rules:{
            title: [
                { validator: validatetitle, trigger: 'blur' }
            ],
            content: [
                { validator: validatecontent, trigger: 'blur' }
            ],
            },
            // 文本编辑器
        }
    },
    created(){
        this.List()
    },
    methods:{
      // 进入页面获取数据
      List(){
        this.baseId = this.$route.query.baseId
        this.form = this.$route.query.form
          // this.loading = true
          this.$api.Basetoaddordelete.ProgramList(this.baseId).then(res => {
              this.tableData = res.data
              this.tableData.forEach((element,index) => {
                  this.tableData[index].createdAt = transitionTime(element.createdAt)
              });
              this.loading = false
          })
        },
        //添加图片
        Image(index,item){
          this.$router.push(`/Addbaseslideshow?baseId=${this.baseId}`)
        },
        // 提示
        newly(){
          this.$router.push(`/Addbasecompile?baseId=${this.baseId}`)
        },
        handleEdit(index,item){
          this.$router.push({path:`/Addbasecompile?baseId=${this.baseId}`,query:{item:item}})
        },
        //删除
        handleDelete(index,item){
              this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.$api.Basetoaddordelete.BaseprojectDelete(item.id).then(res => {
                this.tableData = this.tableData.filter(data => data.id !== item.id)
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
        },
        //后退
        goBack(){
            this.$router.push(`Addbase?baseId=${this.baseId}`)
        },
        //编辑器
        onEditorReady(editor) {}, // 准备编辑器,
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件

        handleAvatarSuccess(response, file, fileList){
        this.ruleForm.imgId = file.response.data.id
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        //提示
            
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .editor {
    line-height: normal !important;
  }
  .editor .edit_container  {
      width: 500px;
  } 
  .quill-editor  {
      height: 350px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
